@CHARSET "UTF-8";

@IMPORT url("page-common.css");

html, body {
	overflow: hidden;
}


.list {
    width: 100%;
    height: 100%;
    padding: 15px;
    overflow: auto;
}

.zk-node {
    width: 200px;
    height: 300px;
    border: 1px solid #f2f2f2;
    padding: 5px;
    float: left;
    margin-right: 25px;
    cursor: pointer;
    position: relative;
}

.zk-node.ONLINE .name {
	color: #ffffff;
    background: #3bbf43;
    background: radial-gradient(circle at 100px 100px, #7eff86, #00440b);
}

.zk-node.OFFLINE .name {
    background: #ffc9c9;
}

.zk-node .name {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: #eeeeee;
    text-align: center;
    line-height: 25px;
    padding-top: 20px;
    margin: 3px;
}


.zk-node.ONLINE .name {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: #3bbf43;
	background: url();
	background: -moz-linear-gradient(top, rgba(112,239,120,1) 0%, rgba(59,191,67,1) 99%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(164, 249, 177)), color-stop(99%,rgb(6, 195, 20)));
	background: -webkit-linear-gradient(top, rgba(112,239,120,1) 0%,rgba(59,191,67,1) 99%);
	background: -o-linear-gradient(top, rgba(112,239,120,1) 0%,rgba(59,191,67,1) 99%);
	background: -ms-linear-gradient(top, rgba(112,239,120,1) 0%,rgba(59,191,67,1) 99%);
	background: linear-gradient(top,  rgba(112,239,120,1) 0%,rgba(59,191,67,1) 99%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#777777',GradientType=0 );
	box-shadow: inset 0 -2px 26px rgba(255,255,255,0.4), inset 2px -6px 45px rgba(0, 0, 0, 0.65), 0 0 1px #00963c;
	-webkit-animation: jump 1s infinite;
	-moz-animation: jump 1s infinite;
	-o-animation: jump 1s infinite;
	-ms-animation: jump 1s infinite;
	animation: jump 1s infinite;
}

.zk-node.ONLINE .name::after {
	content: "";
	width: 80px;
	height: 40px;
	position: absolute;
	left: 60px;
    top: 13px;
	background: url();
	background: -moz-linear-gradient(top,  rgba(232,232,232,1) 0%, rgba(232,232,232,1) 1%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(1%,rgba(232,232,232,1)), color-stop(100%,rgba(255,255,255,0)));
	background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
	background: linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#00ffffff',GradientType=0 );
	border-radius: 40px / 20px;
}

.zk-node:hover {
    background: -moz-linear-gradient(top, #ffd73a, #ffa500);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffd73a), to(#ffa500));
    border: 1px solid #d28703;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: inset 0 1px #ffff90, inset 0 -2px 5px #ffd05d, 0 0 0 4px rgba(255,255,255,0.65);
    -webkit-box-shadow: inset 0 1px #ffff90, inset 0 -2px 5px #ffd05d, 0 0 0 4px rgba(255,255,255,0.65);
}

.node {
    background: #fff;
    border: 1px solid #ffffff;
    height: 100%;
}


.zk-node:hover .node {
    border: 1px solid #d28703;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 1px #ff0;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 1px #ff0;
}

.zk-node .box {
	width: 100%;
	padding: 5px;
	line-height: 23px;
}

.pager {
    position: absolute;
    width: 100%;
    height: 55px;
    bottom: 0;
    color: #ffffff;
    text-align: center;
}

.pager .p-i {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #dcdcdc;
    padding: 5px;
    cursor: pointer;
    display: inline-block;
}

.pager .p-i:hover {
	background: #467ed8;
}

.pager .p-i.right {
    margin-left: 25px;
}

.funcs {
    position: absolute;
    bottom: 5px;
    color: #009048;
    cursor: pointer;
}

.funcs.left {
    left: 10px;
}
.funcs.right {
    right: 10px;
}

.funcs:hover {
    color: #0a86f5;
}

.zk-node .tools {
    width: 100%;
    height: 20px;
    text-align: right;
    font-size: 14px;
    padding: 0 5px;
}

.zk-node .tools .icon {
    display: none;
    float: right;
}

.zk-node:hover .tools .icon {
    display: block;
}

.zk-node:hover .tools .icon {
    margin: 0 2px;
}

.zk-node .tools .icon:hover {
    color: #ff0000;
}

